<template>
    <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
        <div style="font-size: 30px;">{{ user.name + '你好！'}}</div>
        <el-descriptions title="个人中心" :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    账号
                </template>
                {{ user.no }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{ user.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-help"></i>
                    性别
                </template>
                <el-tag
                        :type="user.sex === '1' ? 'primary' : 'danger'"
                        disable-transitions><i
                        :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>{{ user.sex == 1 ? "男" : "女" }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-discount"></i>
                    角色
                </template>
                <el-tag
                        type="success"
                        disable-transitions>
                    {{ user.roleId == 0 ? "超级管理员" : (user.roleId == 1 ? "管理员" : "用户") }}
                </el-tag>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>

export default {
    name: "Home",
    components: {},
    data() {

        return {
            user: {}
        }
    },
    computed: {},
    methods: {
        init() {
            this.user = JSON.parse(sessionStorage.getItem('CurUser'))
        }
    },
    created() {
        this.init()
    }
}
</script>

<style scoped>
.el-descriptions {
    width: 90%;

    margin: 0 auto;
    text-align: center;
}
</style>
